import { Component, OnInit } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import {HttpClient} from "@angular/common/http";
import {ShortageReviewDataService} from "./shortage-review-data.service";

@Component({
  selector: 'app-head-shortage-main',
  template: `
    <!--    页头-->
<!--    <div class="func-top-bar">
      <div class="func-title-container">
        <div class="func-title">
          Head Shortage Page
        </div>
      </div>
      <div class="func-top-bar-btn-container">
      </div>
    </div>-->
    <!--    grid 布局-->
    <div class="shortage-main" >
      <div class="st-top-left"></div>
      <div class="st-top-middle"></div>
      <div class="st-top-right"></div>
      <div class="lm" >
        <div class="st-left" [@openClose]="isOpen ? 'open' : 'close'">
          <div class="qc"></div>
          <div class="collapse-ctrl">
            <button class="collapse-btn"
                    (click)="isOpen = !isOpen">
            </button>
          </div>
        </div>
        <div class="st-middle">
          <div class="item-table"></div>
        </div>
      </div>
      <div class="st-right">
        <div class="where-use-panel">
        </div>
      </div>
    </div>
  `,
  styleUrls: [ './shortage-main.less' ],
  animations: [
    trigger('openClose', [
      state('open', style({
        width: '260px'
      })),
      state('close', style({
        width: '0'
      })),
      transition('open => close', [
        animate('.4s cubic-bezier(0.35, 0, 0.25, 1)'),
      ]),
      transition('close => open', [
        animate('.4s cubic-bezier(0.35, 0, 0.25, 1)'),
      ]),
    ])
  ],
  providers: [ ShortageReviewDataService ]
})
export class ShortageMainComponent implements OnInit {

  isOpen = true;
  constructor(
    private http: HttpClient,
    private dataSvc: ShortageReviewDataService
  ) { }

  getItems() {
    this.http.get('/assets/items.json').subscribe((response: any) => {
      let res = JSON.parse(response);
    })
  }

  ngOnInit(): void {
  }

}
